<!--
 * @Author: 曹捷
 * @Date: 2020-09-09 21:25:42
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-02-09 00:39:38
 * @Description: 自定义 单选radio
 新增样式选择 
 row 普通模式
 btn 按钮样式
-->
<template>
  <radio-group @change="checkRedio">
    <label v-if="type ==='row'" class="uni-list-cell uni-list-cell-pd" v-for="item in dataList" :key="item[keyName]">
      <view>
        <radio :value="item[keyName]" :checked="index === item[keyName]" />
      </view>
      <view>{{ item[label] }}</view>
    </label>
    <div v-if="type==='btn'" class="radio-list">
      <div class="list-item  flex-l needsclick" :class="index === item[keyName]?'select':''" v-for="item in dataList"
        @click="clickRedio(item)" :key="item[keyName]">
        <div class="left one-line ">
          {{item[label]}}
        </div>
        <div class="right needsclick">
          <span class="p-r-10 needsclick" v-if="rightName">￥ {{item[rightName]}}</span>
          <radio class="needsclick" :value="item[keyName]" :checked="index === item[keyName]"></radio>
        </div>
      </div>
    </div>

  </radio-group>
</template>

<script>
export default {
  props: {
    value: {
      type: [Number, String],
    },
    dataList: {
      type: Array,
    },
    label: {
      type: String,
      default: 'valueDesc',
    },
    keyName: {
      type: String,
      default: 'codeValue',
    },
    rightName: {
      type: String,
      default: 'rightName',
    },
    // 样式类型
    type: {
      type: String,
      default: 'row'
    },
    isCacel: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    value:{
      handler(value){
        this.index = value + ''
      },
      immediate:true
    },
    index () {
      this.$emit('input', this.index)
      this.$emit('change', this.index)
      this.$emit('update:item', this.dataList.find(item => {
        return item[this.keyName] === this.index
      }))

    }
  },
  data () {
    return {
      index: '',
    }
  },
  methods: {
    clickRedio(item){
      // if(this.isCacel){
      //   this.index = item[this.keyName]
      // }else{
      //   this.index = item[this.keyName]
      // }
      this.index = item[this.keyName]
    },
    checkRedio (e) {
      this.index = e.detail.value
    },
  },
}
</script>

<style lang="scss">
.uni-list-cell {
  justify-content: flex-start;
  padding-left: 0;
}
.radio-list {
  .needsclick {
    position: relative;
  }
  .right {
    width: 200rpx;
    text-align: right;
  }
  .list-item {
    // font-family: 'PingFangSC-Semibold';
    padding: 0 26rpx;
  }
}
</style>
